<template>
  <div>
    <div class="tabBox">
      <router-link to="/" class="tabItem">
        <img v-if="pathName!=='/'" src="../assets/img/tab/icon_shouye.png" alt />
        <img v-if="pathName=='/'" src="../assets/img/tab/icon_shouyeshouye_click.png" alt />
        <div class="tabTitle" :class="pathName=='/'?'active':''">首页</div>
      </router-link>
      <router-link to="/news" class="tabItem">
        <img v-if="pathName!=='/news'" src="../assets/img/tab/icon_news.png" alt />
        <img v-if="pathName=='/news'" src="../assets/img/tab/icon_news_click.png" alt />
        <div class="tabTitle" :class="pathName=='/news'?'active':''">消息</div>
      </router-link>
      <router-link to="/mine" class="tabItem">
        <img v-if="pathName!=='/mine'" src="../assets/img/tab/icon_my.png" alt />
        <img v-if="pathName=='/mine'" src="../assets/img/tab/icon_my_click.png" alt />
        <div class="tabTitle" :class="pathName=='/mine'?'active':''">我的</div>
      </router-link>
    </div>
  </div>
</template>

<script>

export default {

  data() {
    return {
      pathName: ''
    }
  },
  created() {
    this.pathName = this.$route.fullPath

  }
}
</script>
<style lang="less" scoped>
.tabBox {
  display: flex;
  align-items: center;
  z-index: 3;
  border-top: 1px solid #e4e4e4;
  padding-top: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  .tabItem {
    flex: 1;
    text-align: center;
    img {
      width: 50px;
    }
    .tabTitle {
      color: #353535;
      margin-top: -8px;
    }
    .tabTitle.active {
      color: #498dff;
    }
  }
}
</style>